<!-- 佣金提现 -->
<template>
	<div class="commission-content">
    <div class="flex a-c">
			<!-- 返回 -->
			<div class=" flex a-c">
				<img @click="backBtn" class="back-icon c-p" src="@/assets/images/public/back-return.png" alt="">
				<div class="ml-16 col-222 f-24 lin-34 bold">
					{{ $t('user.commissionWithdrawal') }}
				</div>
			</div>
    </div>
		<!-- 说明 -->
		<div class="mt-18 flex a-c pl-24 pt-16 pb-16 pr-24 commission-explain">
			<img class="explain-icon" src="@/assets/images/user/withdraw-tip.png" alt="">
			<div class="f-1 pl-8 col-d47 f-14 lin-20">
				{{ $t('setting.commissionExplain') }}
			</div>
		</div>
		<div class="flex a-c j-sb mt-16">
			<!-- 提现渠道 -->
			<div>
				<withdraw-channel :accountType="accountType" @changeChannel="accountChange"></withdraw-channel>
			</div>
			<!-- 提现记录 -->
			<div class="flex a-c">
				<img class="channel-record" src="@/assets/images/user/channel-record.png" alt="">
				<router-link to="withdraw/record" class="col-222 f-16 lin-22 ml-4">{{ $t('user.withdrawalRecord') }}</router-link>
			</div>
		</div>
		<div class="mt-16 withdraw-balance">
			<div class="balance-222 p-24 bg-222">
				<div class="col-fff f-14 lin-20">
					{{ $t('setting.commissionPrice') }}：CNY {{ userInfo.commissionBalanceCny }} <span style="opacity: 0.5;">{{ $t('setting.minWithAmount') }}</span>
				</div>
				<div class="flex a-e j-sb mt-8">
					<div class="f-1 balance-num pb-10 flex a-c">
						<div class="col-fff f-16 lin-48 mr-8">
							￥
						</div>
						<Input 
							class="balance-input" 
							v-model="form.amount" 
							@on-blur="inputBlur" 
							@on-change="inputBlur"
							:placeholder="$t('setting.accountInputPlaceholder')">
						</Input>
					</div>
					<div class="balance-max flex a-c j-c col-fff f-14 lin-14 ml-20 c-p" @click="onMax">
						MAX
					</div>
				</div>
				<div class="flex a-c mt-12 f-14 lin-20">
					<div class="balance-circle"></div>
					<div class="col-fff ml-4">
						{{ $t('user.conversion_tips_before') }} ≈{{ selectCurrency }} {{ conversionAmount }}，{{ $t('user.conversion_tips_after') }}
					</div>
				</div>
			</div>
		</div>
		<div class="pl-30">
			<div class="withdraw-account pt-40 pl-30">
				<div class="pt-32 flex a-c j-sb">
					<div class="pos-r col-222 bold f-16 lin-22">
						{{ $t('user.withdrawalAccount') }}
						<div class="account-circle pos-a"></div>
					</div>
					<!-- 新增提现账号 -->
					<div class="flex a-c c-p" @click="accountOpen">
						<Icon type="ios-add-circle-outline col-222 f-14 lin-14" />
						<div class="col-222 f-14 lin-20 ml-4">
							{{$t('setting.settingAddAccount')}}
						</div>
					</div>
				</div>
				<div class="mt-16">
					<withdraw-select 
						ref="selectRef"
						:accountType="accountType" 
						:firstType="2"
						@idSend="selectSuccess"
						>
					</withdraw-select>
				</div>
				<div class="mt-40">
					<div class="pos-r col-222 bold f-16 lin-22">
						{{ $t('user.withdraw') }}
						<div class="account-circle pos-a"></div>
					</div>
				</div>
				<div class="mt-8 f-14 lin-20 col-888">
					{{ $t('setting.withdrawConfirmSub') }}
				</div>
			</div>
			<!-- 申请提现 -->
      <div class="pl-30 flex mt-16">
        <div @click="onShowPop" class="br-2 col-fff f-16 lin-16 bg-ff1 flex a-c j-c withdraw-confirm c-p plr-16">
          {{ $t('setting.withdrawConfirmBtn') }}
        </div>
      </div>
		</div>
		<!-- 常见问题 -->
    <div class="mt-40">
      <withdraw-faq></withdraw-faq>
    </div>
    <!-- 二次确认提现 -->
    <withdraw-confirm ref="confirmsRef" @submitSuccess="submitSuccess"></withdraw-confirm>
	</div>
</template>

<script>
  import { mapState } from "vuex";
	import { bigTimes } from "@/common/digital-computation";
	import { inputDigit } from '@/common/common';
  import withdrawFaq from "./withdraw-faq.vue";
	import withdrawChannel from "./withdraw-channel.vue";
	import withdrawSelect from "./withdraw-select.vue";
	import withdrawConfirm from "./withdraw-confirm.vue";

	export default{
		data(){
			return{
				accountType:2,//1 银行卡;2-payPal账号
				loading: false,
				showPop: false,
				bankInfo: '',
				form: {
					amount: '', // 提现金额
					type: 'commission', // 类型(amount：账户余额、 commission：佣金余额)
					userCardId: '' // 用户卡片ID
				},
				conversionAmount:0,//预计到账
				cnyExchangeRate:1,//选择账号与cny的汇率
				selectCurrency:'CNY',//选择账号的币种
			}
		},
		components:{
			withdrawFaq,
			withdrawChannel,
			withdrawSelect,
			withdrawConfirm
		},
		props:{
			
		},
		computed:{
			...mapState({
        userInfo: state => state.user.userInfo
      })
		},
		created(){
    	
		},
		mounted() {
			
		},
		methods:{
			//最大值
			onMax(){
				this.form.amount = this.userInfo.commissionBalanceCny;
				this.inputBlur();
			},
			// 根据当前选择的账户的货币换算
			inputBlur() {
				this.conversionAmount = this.accountType == 2 ? this.form.amount : bigTimes(this.form.amount, this.cnyExchangeRate);
				this.valueChange();
			},
			//后退
			backBtn() {
				this.$router.back();
			},
			//显示二次确认弹窗
			onShowPop() {
				if (!this.form.userCardId) {
					this.$Message.error(this.$t('user.pleaseSelectWithdrawalAccount'));
					return false;
				}
				if (this.form.amount < 10) {
					this.$Message.error(this.$t('user.minWithTips'));
					return;
				}
				//大于最大值
				if(this.form.amount > this.userInfo.commissionBalanceCny){
					this.$Message.error(this.$t('setting.withdrawOverMax'));
					setTimeout(() => {
						this.form.amount = this.userInfo.commissionBalanceCny;
						this.selectInit();
					},500)
					return;
				}
				this.$refs.confirmsRef.open(this.form);
			},
			//渠道切换
			accountChange(index){
				if(this.accountType != index){
					this.accountType = index;
					setTimeout(()=>{
						this.selectInit();
					},10)
				}
			},
			//选择账号，接收子组件发送的id
			selectSuccess(obj){
				this.selectCurrency = this.accountType == 2 ? 'CNY' : obj.currency;
				this.cnyExchangeRate = this.accountType == 2 ? 1 : obj.cnyExchangeRate;
				this.form.userCardId = obj.id;
				this.inputBlur();
			},
			//重置选择
			selectInit(){
				this.$refs.selectRef.init();
			},
			accountOpen(){
				this.$refs.selectRef.addOpen();
			},
			//提现成功
			submitSuccess(){
				this.form.amount = '';
			},
			valueChange(){
				if(this.form.amount){
					this.$nextTick(()=>{
						this.form.amount = inputDigit(this.form.amount);
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.commission-content{
		.back-icon{
			width: 32px;
			height: 32px;
		}
		.commission-explain{
			background: #FFF6E7;
			.explain-icon{
				width: 24px;
				height: 24px;
			}
		}
		.channel-record{
			width: 16px;
			height: 16px;
		}
		.withdraw-balance{
			.balance-222{
				.balance-max{
					height:48px;
					width:80px;
					background: #4A4A4A;
				}
				.balance-circle{
					width:4px;
					height:4px;
					border-radius:50%;
					background: #fff;
				}
				.balance-num{
					border-bottom:1px solid #444;
				}
				.balance-input{
					/deep/ .ivu-input{
						background:transparent;
						border: none;
						padding: 0;
						font-size: 48px;
						line-height: 68px;
						font-weight: 400;
						height: 68px;
						color: #fff;
					}
				}
			}
		}
		.withdraw-account{
			border-left: 1px solid #E2E2E2;
			.account-circle{
				width: 16px;
				height: 16px;
				border-radius: 50%;
				background: #D8D8D8;
				top: 2px;
				bottom: 0;
				left: -40px;
			}
		}
		.withdraw-confirm{
			height: 48px;
			min-width: 112px;
		}
  }
</style>